import React, { Component } from 'react';
import ReactDom from 'react-dom';
import {Button,Dialog,Input} from 'element-react';
import IData from './personMsgData.js';

export class Bank extends Component {
    constructor(props) {
        super(props);

        this.state = {

            dialogVisible: false,
            value: IData.bank,
            value1: IData.bank
        };
    }
    onChange(value) {
        this.setState({ value });
    }
    enter(event){
        event=event||window.event;
        if(event.keyCode=='13'){
            this.changeValue();
        }
    }
    changeValue(){
        var value1=this.state.value;
        this.setState({ dialogVisible: false,value1 });

    }

    render() {
        return (
            <div className="zy1">

                <Button className="font" type="text" onClick={ () => this.setState({ dialogVisible: true }) }>
                    <span>{this.state.value1}</span>&nbsp;&nbsp;&nbsp;<i className="el-icon-arrow-right el-icon-edit"></i></Button>
                <Dialog
                    title="归属银行"
                    size="middle"
                    visible={ this.state.dialogVisible }
                    onCancel={ () => this.setState({ dialogVisible: false }) }
                >
                    <Dialog.Body>
                        <Input value={this.state.value} onChange={this.onChange.bind(this)}onKeyDown={this.enter.bind(this)}></Input>
                    </Dialog.Body>
                    <Dialog.Footer className="dialog-footer">
                        <Button type="primary" onClick={ this.changeValue.bind(this) }>保存</Button>
                    </Dialog.Footer>
                </Dialog>
            </div>

        )
    }
}